<template>
  <div class="row">
    <div class="col-12 col-md-8">
      <!--new Pizza-->
      <new-pizza/>
    </div>
    <div class="col-12 col-md-4">
      <!--品种展示 my===>margin-bottom margin-top-->
      <h3 class="text-muted my-5">菜单</h3>
      <table class="table">
        <thead class="table table-default">
          <tr>
            <th>品种</th>
            <th>删除</th>
          </tr>
        </thead>
        <tbody v-for="(item, index) of getMenuItems" :key="index">
          <tr>
            <td>{{item.name}}</td>
            <td>
              <button @click="deleteData(item)" class="btn btn-outline-danger btn-sm">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import newPizza from './components/NewPizza'
import Bmob from 'hydrogen-js-sdk'
export default {
  name: 'Admin',
  components: {
    newPizza
  },
  data () {
    return {
      name: '王坤'
      // getMenuItems: []
    }
  },
  // 路由内守卫 进入组件之前
  beforeRouteEnter: (to, from, next) => {
    next(vm => { // 回调函数的方式 vm自己起的变量名
      alert('Hello' + vm.name)
    })
  },
  // 路由内守卫 离开组件之前
  beforeRouteLeave: (to, from, next) => {
    if (confirm('确定离开吗') === true) { // 弹窗组件confirm
      next()
    } else {
      next(false)
    }
  },

  beforeUpdate () { // 刚进入页面的时候执行此函数  mounted是模板渲染后 created是模板渲染前
    // 获取数据表中所有的数据
    // fetch获取数据
    // fetch('http..')
    //   .then(res => {
    //     return res.json() // 数据流
    //   })
    //   .then(data => { // 得到的数据
    //     console.log(data)
    //     let menuArray = []
    //     for (let i in res) {
    //       console.log(res[i])
    //       // 遍历出来设置id,为了之后删除所用
    //       res[i].objectId = i // 数组就会有一个新的id 1 2 3 4...
    //       console.log(i)
    //       menuArray.push(res[i])
    //     }
    //   })
    // Bomb获取数据
    const query = Bmob.Query('newPizzaTable')
    query.find().then(res => {
      console.log(res)
      let menuArray = []
      for (let i in res) {
        // console.log(res[i])
        // 遍历出来设置id,为了之后删除所用
        // res[i].objectId = i // 数组就会有一个新的id 1 2 3 4...
        // console.log(i)
        menuArray.push(res[i])
      }
      // this.getMenuItems = menuArray
      // 和vuex数据同步 commit是吧数据传给vuex，setMenuItems是mutations方法名字
      this.$store.commit('setMenuItems', menuArray)
    })
  },
  computed: {
    getMenuItems: { // 计算属性可以存俩个方法
      get () { // 自带的方法
        // vuex中获取数据
        // return this.$store.state.menuItems
        return this.$store.getters.getMenuItem
      },
      set () {}
    }
  },
  methods: {
    // 删除一条数据
    deleteData (item) {
      // fetch方法
      // fetch('http....' + item.id + '/.json', {
      //   method: 'DELETE',
      //   headers: {
      //     'Content-type': 'application/json'
      //   }
      // })
      //   .then(res => res.json())
      //   .then(data => {
      //     console.log(data)
      //     this.$router.push('/menu')
      //   })
      //   .then(err => console.log(err))
      console.log(item)
      const query = Bmob.Query('newPizzaTable')
      query.destroy(item.objectId)
        .then(res => {
          // console.log(res)
          // this.$router.push('/menu')
          this.$store.commit('removeMenuItems', item)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
